<template>
    <div>
        <div class="card tr mb2">
            <el-popover placement="bottom" width="200" trigger="click">
                <el-checkbox-group v-model="showItemList">
                    <el-checkbox v-for="(item,key) in allItemList" :key="key" :label="item"></el-checkbox>
                </el-checkbox-group>
                <el-button slot="reference" icon="el-icon-menu" size="mini" type="primary" circle></el-button>
            </el-popover>

            <el-button icon="el-icon-search" @click="formShow= !formShow" size="mini" type="primary" circle></el-button>
            <!-- <el-button size="mini" type="primary" icon="el-icon-plus" @click="showDialog">添加</el-button> -->
        </div>
        <div class="card" v-show="formShow">
            <el-form :model="ruleForm" ref="ruleForm" inline label-width="100px" class="demo-ruleForm">
                <el-form-item label="机构名称" prop="organName">
                    <el-input size="mini" v-model="ruleForm.organName"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button size="mini" type="primary" @click="submitForm('ruleForm')">查询</el-button>
                    <el-button size="mini" @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border default-expand-all
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column type="index" label="序号" width="60">
            </el-table-column>
            <el-table-column prop="organName" label="机构名称">
            </el-table-column>
            <el-table-column prop="organCode" label="部门编号" sortable>
            </el-table-column>
            <el-table-column prop="organType" label="部门类型">
            </el-table-column>
            <el-table-column prop="organOrder" label="顺序" sortable>
            </el-table-column>
            <el-table-column label="操作" width="280px" fixed="right" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="info" @click="query(scope.row)">查看</el-button>
                    <el-button size="mini" type="primary" @click="edit(scope.row)">修改</el-button>
                    <el-button size="mini" type="danger" @click="delete(scope.row)">删除</el-button>
                    <el-button size="mini" type="success" @click="add(scope.row)">添加下级</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                ruleForm: {
                    organName: "",
                },
                formShow: false,
                allItemList: [
                    "id",
                    "机构名称",
                    "部门编号",
                    "部门类型",
                    "顺序",
                    "操作"
                ],
                showItemList: ["机构名称", "部门编号", "部门类型", "顺序", "备注", "操作"],
                tableData: [{
                    id: 1,
                    organName: '担保集团股份有限公司',
                    organCode: '1',
                    organType: '公司',
                    organOrder: '1',
                    children: [
                        {
                            id: 2,
                            organName: '财务部',
                            organCode: '101',
                            organType: '部门',
                            organOrder: '2',
                        }, {
                            id: 3,
                            organName: '业务部门',
                            organCode: '102',
                            organType: '部门',
                            organOrder: '3',
                            children: [{
                                id: 31,
                                organName: '华东区域',
                                organCode: '10201',
                                organType: '部门',
                                organOrder: '31',
                            }, {
                                id: 32,
                                organName: '华南区域',
                                organCode: '10202',
                                organType: '部门',
                                organOrder: '32',
                            }, {
                                id: 33,
                                organName: '河北分公司',
                                organCode: '10203',
                                organType: '公司',
                                organOrder: '33',
                            },
                            {
                                id: 34,
                                organName: '深圳分公司',
                                organCode: '10204',
                                organType: '公司',
                                organOrder: '34',
                                children: [{
                                    id: 341,
                                    organName: '深圳业务一部',
                                    organCode: '1020401',
                                    organType: '部门',
                                    organOrder: '341',
                                },
                                {
                                    id: 342,
                                    organName: '深圳业务二部',
                                    organCode: '1020402',
                                    organType: '部门',
                                    organOrder: '342',
                                }
                                ]
                            }
                            ]
                        }
                    ]
                }],

            }
        },
        methods: {
            resetForm(formName){},
            submitForm(formName){},
            query() {

            },
            edit() { },
            delete() { },
            add() { },
            load(tree, treeNode, resolve) {
                setTimeout(() => {
                    resolve([
                        {
                            id: 31,
                            date: '2016-05-01',
                            name: '王小虎',
                            address: '上海市普陀区金沙江路 1519 弄'
                        }, {
                            id: 32,
                            date: '2016-05-01',
                            name: '王小虎',
                            address: '上海市普陀区金沙江路 1519 弄'
                        }
                    ])
                }, 1000)
            }
        },
    }
</script>